<my-pageheader></my-pageheader>

<div style="margin: 20px 20px 50px 20px" *ngIf="ability">
    <mat-card style="margin-top: 20px; background-color: #f0f0f0">
        <div style="float: right; font-size: 20px; margin-right: 20px" *ngIf="!isMobile">
            <a (click)="toggleStar()" matTooltip="关注">
                <span *ngIf="star" class="fa fa-star" style="color: gold"></span>
                <span *ngIf="!star" class="fa fa-star-o"></span>
            </a>
            &nbsp;
            <a (click)="gotoStargazers()">
                <span matTooltip="粉丝数量">{{ability.starCount}}</span>
            </a>
        </div>
        <span style="font-weight: bold; font-size: 28px">
            {{ability.solutionName}}
        </span>
        <span *ngIf="isOwner && ability.isPublic && !isMobile" style="font-size: 16px; color: red">
            |我的能力
        </span>
        <span *ngIf="isOwner && !ability.isPublic && !isMobile" style="font-size: 16px; color: red">
            |我的私有能力
        </span>
        <span *ngIf="isOperator && !isMobile" style="font-size: 16px; color: red">
            |我是管理员
        </span>
    </mat-card>

    <mat-card *ngIf="isOperator && !isMobile">
        <p>控制字段(仅管理员可见)</p>
        <mat-form-field>
            <input matInput [(ngModel)]="ability.subject1" type="text" placeholder="主题1" maxlength=20>
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput [(ngModel)]="ability.subject2" type="text" placeholder="主题2" maxlength=20>
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput [(ngModel)]="ability.subject3" type="text" placeholder="主题3" maxlength=20>
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <mat-form-field>
            <input matInput [(ngModel)]="ability.displayOrder" type="number" placeholder="显示控制">
        </mat-form-field>
    </mat-card>
    <mat-card>
        <div style="float: right">
            <mat-card style="width: 200px; height: 200px">
                <a (click)="gotoSolution()">
                    <img matCardImage src="{{ability.pictureUrl}}" alt="blank" matTooltip="点击查看模型详情">
                </a>
            </mat-card>
        </div>
        <div>
            <p>模型名称： {{ability.solutionName}}</p>
            <p>
                模型作者：
                <a (click)="gotoPersonalModels(ability.solutionAuthor)">
                    {{ability.solutionAuthor}}
                </a>

            </p>
            <p>
                能力部署：
                <a (click)="gotoPersonalAbilitys(ability.deployer)">
                    {{ability.deployer}}
                </a>
            </p>
            <p>部署日期： {{ability.createdDate | date:'yyyy-MM-dd HH:mm:ss'}}
            <p>调用次数： {{ability.callCount}}</p>
            <p>
                运行状态：
                <span *ngIf="ability.status === '运行'" style="color: green">{{ability.status}}</span>
                <span *ngIf="ability.status !== '运行'" style="color: red">{{ability.status}}</span>
            </p>
        </div>
    </mat-card>
    <mat-card *ngIf="(isOperator || isOwner) && ability.status !== '停止' && !isMobile">
        <p>
            <span  style="font-weight: bold; font-size: 24px">
                生命周期管理
            </span>
        </p>
        <div *ngIf="ability.status === '运行' && deploymentStatus">
            <p>
                <span *ngIf="!changing">容器副本（就绪/总数）： {{deploymentStatus.replicasReady}} / {{deploymentStatus.replicas}}</span>
                <span *ngIf="changing">
                        容器副本（总数）：
                        <input [(ngModel)]="resource.replicas" type="number" min="1" max="5">
                    </span>
            </p>
            <p>
                <span>内存资源（需求/限制）： </span>
                <span *ngIf="!changing">{{deploymentStatus.requestsMem}} / {{deploymentStatus.limitsMem}}</span>
                <span *ngIf="changing">
                        <input [(ngModel)]="resource.requestsMem" type="text" placeholder="内存需求值" maxlength=7>
                        &nbsp;/&nbsp;
                        <input [(ngModel)]="resource.limitsMem" type="text" placeholder="内存限制值" maxlength=7>
                    </span>
            </p>
            <p>
                <span>CPU资源（需求/限制）： </span>
                <span *ngIf="!changing">{{deploymentStatus.requestsCpu}} / {{deploymentStatus.limitsCpu}}</span>
                <span *ngIf="changing">
                    <input *ngIf="changing" [(ngModel)]="resource.requestsCpu" type="text" placeholder="CPU需求值" maxlength=7>
                    &nbsp;/&nbsp;
                    <input *ngIf="changing" [(ngModel)]="resource.limitsCpu" type="text" placeholder="CPU限制值" maxlength=7>
                </span>
            </p>
        </div>
        <p>
            <span *ngIf="ability.status === '暂停'">
                <button mat-raised-button color="primary" (click)="restartAbility()">重启实例</button>
            </span>
            <span *ngIf="ability.status === '运行'">
                <button mat-raised-button color="primary" *ngIf="!changing && deploymentStatus" (click)="toggleScaleAbility()">实例扩缩容</button>
                <span *ngIf="changing">
                    <button mat-raised-button color="accent" *ngIf="changing" (click)="scaleAbility()">执行扩缩容</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button mat-raised-button color="basic" *ngIf="changing" (click)="toggleScaleAbility()">取消扩缩容</button>
                </span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button mat-raised-button color="accent" (click)="pauseAbility()">暂停实例</button>
            </span>
            <span *ngIf="ability.status === '运行' || ability.status === '暂停'">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button mat-raised-button color="warn" (click)="stopAbility()">停止实例</button>
            </span>
            <span *ngIf="ability.status === '运行'">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button mat-raised-button color="primary" *ngIf="!showPodLogs" (click)="togglePodLogs()">查看日志</button>
                <button mat-raised-button color="basic" *ngIf="showPodLogs" (click)="togglePodLogs()">隐藏日志</button>
            </span>
        </p>
        <div *ngIf="ability.status === '运行' && deploymentStatus">
            <mat-form-field *ngIf="showPodLogs" style="width: 100%">
                <textarea matInput style="height: 200px" [ngModel]="podLogs" placeholder="容器日志" readonly></textarea>
            </mat-form-field>
        </div>
    </mat-card>
    <mat-card *ngIf="ability.status === '运行'">
        <p>
            <span  style="font-weight: bold; font-size: 24px">
                API接口测试
            </span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button (click)="openWeb()">模型应用示范</button>
        </p>
        <br>
        <p>
            HTTP方法： POST
        </p>
        <p>
            HTTP请求体格式请参考模型文档：&nbsp;&nbsp;&nbsp;&nbsp;
            <button (click)="gotoSolution()" *ngIf="ability.solution">查看模型</button>
        </p>
        <p>
            URL： {{url_model}}
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button mat-raised-button color="primary" (click)="sendTestRequest()" [disabled]="!requestBody || sending">
                发送请求
            </button>
        </p>
        <div class="row">
            <div class="col-md-6">
                <button mat-raised-button color="primary" (click)="genTestRequest()" *ngIf="!requestBody">
                    <span>生成测试数据</span>
                </button>
                <button mat-raised-button color="accent" (click)="cleanTestRequest()" *ngIf="requestBody">
                    <span>清空测试数据</span>
                </button>
                <br><br>
                <mat-form-field style="width: 100%">
                    <textarea matInput style="height: 200px" [(ngModel)]="requestBody" placeholder="HTTP请求体"></textarea>
                </mat-form-field>
            </div>
            <div class="col-md-6">
                <button mat-raised-button color="accent" (click)="cleanResponseBody()" [disabled]="!responseBody">
                    <span>清空响应体</span>
                </button>
                <br><br>
                <mat-form-field style="width: 100%">
                    <textarea matInput style="height: 200px" [ngModel]="responseBody" placeholder="HTTP响应体" readonly></textarea>
                </mat-form-field>
            </div>
        </div>
    </mat-card>
</div>
